<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            ES6新增的语法  
            内置构造函数  Proxy(代理原始对象,{配置项})
            返回值: 一个对象 代理结果数据   相当于前面说的劫持后的数据 
        
            相当于把原始数据代理(复制一份),
            通过修改代理的属性 和获取代理的属性达到
            修改原始数据的属性 和 获取原始数据的属性   
            监控属性的目的 
        
        
        */


        const obj = {name:'zhangsan',age:18};
        const myproxy = new Proxy(obj,{
            get(target,property){
                // target   目标  你要代理的目标对象
                // property 属性  该对象的每个属性  自动遍历 
                console.log(`你想获取${property}属性的值`);
                return target[property];
            },
            set(target,property,val){
                target[property] = val;
                console.log(`你想修改${property}属性的值,想改成${val}`);
                return true; // 简单代理 返回true  
            }
        })

        console.log('原始数据',obj);
        console.log('代理数据',myproxy);
        console.log('代理结果',myproxy.name);
        console.log('代理结果',myproxy.age);


        myproxy.name = '刘思';
        console.log('代理结果',myproxy.name);


        myproxy.age = 21;
        console.log('代理结果',myproxy.age);


        console.log(obj);
    </script>
</body>
</html>